<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link
		  rel="stylesheet"
		  href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css"
		/>
		<style type="text/css">
			#app{
				padding: 0 10px;
			}
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<h1>TodoList</h1>
			<hr >
			<input type="text" placeholder="添加待办" v-model="value" @keyup.enter="add"/>
			<h3>待办</h3>
			<ul>
				<li v-for="item in list" v-show="!item.check"><input type="checkbox" v-model="item.check" />{{item.value}}</li>
			</ul>
			<h3>完成</h3>
			<ul>
				<li v-for="item in list" v-show="item.check"><input type="checkbox" v-model="item.check" />{{item.value}}</li>
			</ul>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
	<script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>
	<script>
	  // 在 #app 标签下渲染一个按钮组件
	  const app = Vue.createApp({
	    data(){
			return {
				value:'',
				list:[]
			}
		},
		methods:{
			add(){
				this.list.push({check:false,value:this.value})
				this.value = ''
				 vant.Toast('添加成功');
			}
		}
		
	  });
	  app.use(vant);
	  app.mount('#app');
	
	  // 调用函数组件，弹出一个 Toast
	 
	
	  // 通过 CDN 引入时不会自动注册 Lazyload 组件
	  // 可以通过下面的方式手动注册
	  // app.use(vant.Lazyload);
	</script>
</html>
